<template>
  <view class="container">
    <!-- 标题 -->
    <view class="header">
      <text class="title">上传公司营业执照</text>
    </view>

    <!-- 公司名称 -->
    <view class="company-name">
      <text>请上传“佛山市知水尚远网络科技有限公司”的营业执照</text>
    </view>
	<image src="https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf29ea27b5.png" class="license-img" @click="uploadLicense"></image>
    <!-- 支持格式 -->
    <view class="section">
      <text class="section-title">支持格式</text>
      <text class="section-content">营业执照原件、彩色扫描件、黑白/彩印+盖章</text>
    </view>

    <!-- 注意事项 -->
    <view class="section">
      <text class="section-title">注意事项</text>
      <view class="notes">
        <text class="note">1. 拍摄与所填<text class="blue">公司全称一致</text>的营业执照并上传</text>
        <text class="note">2. 最新下发的营业执照</text>
        <text class="note">3. 营业执照信息与公章<text class="blue">清晰可辨</text></text>
        <text class="note">4. 如上传<text class="blue">复印件/彩印件</text>，请加盖<text class="blue">公司公章</text></text>
      </view>
    </view>


    <!-- 其他认证方式 -->
    <view class="other-options">
      <text class="other-options-text">其他认证方式</text>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    // 上传营业执照
    uploadLicense() {
      uni.chooseImage({
        count: 1, // 只能选择一张图片
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          uni.showToast({
            title: "上传成功",
            icon: "success",
          });
          // 这里可以调用上传接口，将图片上传到服务器
          console.log("上传的图片路径：", tempFilePaths);
        },
        fail: (err) => {
          uni.showToast({
            title: "上传失败",
            icon: "none",
          });
          console.error("上传失败：", err);
        },
      });
    },
  },
};
</script>

<style>
.container {
  padding: 20px;
  background-color: #f9f9f9;
}

.header {
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.company-name {
  font-size: 16px;
  color: #555;
  margin-bottom: 20px;
}

.license-img{
	display: flex;
	margin: 0 auto;
	width: 155px;
height: 115px;
}

.section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #555;
  margin-bottom: 10px;
  display: block;
}

.section-content {
  font-size: 14px;
  color: #666;
  display: block;
}

.notes {
  margin-left: 15px;
}

.note {
  font-size: 14px;
  color: #666;
  display: block;
  margin-bottom: 8px;
}

.blue{
	color: #2F318B;
}

.other-options {
  margin-top: 20px;
  text-align: center;
}

.other-options-text {
  font-size: 12px;
  font-weight: bold;
  color: #8d8d8d;
}
</style>